<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <div id="list">

    </div>
</body>
<!-- 模板字符串 -->
<script>
    // 例子
    var s1 = 'hhh '
    var s2 = "jjj"
    var str = `<h1>${s1}</h1><h2>${s2}</h2>`
    console.log(str)

    // 字符串新方法
    var m = "7"  //补零
    // padStart会返回新的值 需要一个变量去接受padStart的结果
    var m1 = m.padStart(2, "0")
    console.log(m1)

    var d = new Date()
    var month = (d.getMonth() + 1).toString().padStart(2, 0)
    // 生成月份初始值 + 1 toString将number转换为string，然后可以使用字符串方法 padStart进行补零
    console.log(month, typeof month)
    // 检测month是否为string





    // 数组方法
    function a() {
        console.log(arguments)
        // console.log(Array.form(arguments))
        console.log([...arguments])
        console.log(Array.prototype.slice.call(arguments))
        console.log([].slice.call(arguments))
    }
    a(1, 2, 3, 4, 5, 6, 7, 8, 9, 0)

    var li = document.getElementsByTagName("li")
    console.log(li)
    console.log([...li])//扩展运算符转数组 使用数组方法




    console.log(Array.of('a', 'b', 'c'))
    // obj.call(xx, 1, 2, 3, 4, 5)
    // obj.apply(xx, [1, 2, 3, 4, 5])




    var b = new Array(8)
    b.fill(0)
    // console.log(b)
    function show() {
        var s = ""
        for (var i = 0; i < b.length; i++) {
            // 判断是否触发过xuanzuo事件 若被触发过 添加disabled使其无法选择
            if (b[i] == 1) {
                s += `
                    <button onclick="xuanzuo(${i})" disabled>${b[i]}</button>
                    `
            } else {
                s += `
                    <button onclick="xuanzuo(${i})">${b[i]}</button>
                    `
            }

        }
        document.getElementById("list").innerHTML = s
    }
    // 运行时渲染一次
    show()
    function xuanzuo(i) {
        b[i] = 1
        // 触发事件后渲染一次。
        show()
    }



    var arr3 = ['aa', 'bb', 'cc']
    for (let val of arr3.keys()) {
        console.log(val)
    }
    // keys()是数组下标组成数组 values()是数组每项的值组成数组  entries()是每项的下标及值组成数组


    // flat

    var arr2 = [1, 2, [3, 4, [5]]]
    console.log(arr2.flat(Infinity))
    // Infinity无穷大



    // 递归调用 数组降维 （扁平化）
    var x = []
    function myFlat(arr2) {
        for (var v of arr2) {
            if (Array.isArray(v)) {
                myFlat(v)
            } else {
                x.push(v)
            }
        }
    }
    myFlat(arr2)
    console.log(x)
</script>

</html>